<template>
	<view class="my">
		<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11517@2x.png" mode="" class="myback">
		</image>
		<view class="centerbox">
			<view class="imagebox" @click="gopage('个人信息')">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11518@2x.png"
					class="imageboximg" mode=""></image>
				<image :src="userobj.avatar||'https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11486@2x.png'"
					class="avtar" mode="">
				</image>
				<view class="title">
					{{userobj.nickname||'未登录'}}
				</view>
				<!-- <view class="membernum">
					会员号：{{userobj.mobile||'--'}}
				</view> -->
			</view>
			<view class="jianglibox">
				<view class="linecenter">
					<view class="leftbox" @click="gopage('奖励记录')">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11519@2x.png"
							class="leftboximg" mode="">
						</image>
						<view class="t1" :style="{'margin-bottom':shuliangobj.yqnum?'24rpx':''}">
							奖码记录
						</view>
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11449@2x.png"
							class="arrow" mode="" v-if="!shuliangobj.yqnum"></image>
						<view class="arrowbox" v-if="shuliangobj.yqnum">
							{{shuliangobj.yqnum}}
							<image src="/static/jj.png" class="arrow" mode=""></image>

						</view>
					</view>
					<view class="leftbox" @click="gopage('抽奖记录')">
						<image src="/static/Group 11520@2x.png" class="leftboximg" mode="">
						</image>
						<view class="t1" :style="{'margin-bottom':shuliangobj.jpnum?'24rpx':''}">
							抽奖记录
						</view>
						<image src="/static/Group 11526@2x.png" class="arrow" mode="" v-if="!shuliangobj.jpnum"></image>
						<view class="arrowbox" style="background: #8693FF;" v-if="shuliangobj.jpnum">
							{{shuliangobj.jpnum}}
							<image src="/static/jj.png" class="arrow" mode=""></image>
						</view>
					</view>

					<!-- 	<view class="leftbox" @click="gopage('抽奖记录')">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11501@2x.png"
							class="leftboximg" mode="">
						</image>
						<template v-if="shuliangobj.jpnum">
							<view class="readuce">
								{{shuliangobj.jpnum}}
							</view>
						</template>
					</view> -->
				</view>
			</view>
			<view class="yijianitem" @click="gopage('意见反馈')">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x (1).png" mode=""
					class="icon"></image>
				<template v-if="shuliangobj.fknum">
					<view class="readuce1">

					</view>
				</template>
				<span style="margin-left: 24rpx;margin-right: 414rpx;">意见反馈</span>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x (3).png" mode=""
					style="width: 32rpx;height: 32rpx;"></image>
			</view>
			<view class="yijianitem" @click="gopage('系统设置')">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x (2).png" mode=""
					class="icon"></image>
				<span style="margin-left: 24rpx;margin-right: 414rpx;">系统设置</span>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x (3).png" mode=""
					style="width: 32rpx;height: 32rpx;"></image>
			</view>
		</view>
		<view class="" style="height: 200rpx;">
			<view class="">

			</view>
		</view>

		<Tabbar @denglu="denglu1" :page="page"></Tabbar>
		<userlogin ref="denglu" @updata="getuserinfo"></userlogin>
	</view>
</template>
<script>
	import userlogin from '@/components/getuser/getuser.vue'
	import Tabbar from '@/components/tabbar.vue'
	import {
		userinfo,
		userprofile
	} from '@/common/api/api.js'
	export default {
		data() {
			return {
				show: true,
				page: '',
				userobj: {},
				shuliangobj: {}
			}
		},
		components: {
			Tabbar,
			userlogin
		},
		onShow() {
			this.page = '/pages/my/index'
			if (uni.getStorageSync('token')) {
				this.getuserinfo()
			}
		},
		mounted() {

		},
		methods: {
			async getuserinfo() {
				const res = await userinfo()
				if (res.code == 1) {
					this.userobj = res.data.user
					this.shuliangobj = res.data

				}
			},
			close() {
				this.$refs.popup.close()
			},
			denglu1() {
				this.$refs.denglu.DengLu()
			},
			gopage(str) {
				if (!uni.getStorageSync('token')) {
					this.$refs.denglu.DengLu()
					return
				}
				if (str == '个人信息') {
					uni.navigateTo({
						url: '/pages/my/userinfo'
					})
				} else if (str == '奖励记录') {
					uni.navigateTo({
						url: '/pages/my/jiangmarecord'
					})
				} else if (str == '系统设置') {
					uni.navigateTo({
						url: '/pages/my/userinfo'
					})
				} else if (str == '抽奖记录') {
					uni.navigateTo({
						url: '/pages/my/choujiangrecord'
					})

				} else if (str == '意见反馈') {
					uni.navigateTo({
						url: '/pages/my/yijianfankui'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}



	.chongzhongjp {
		width: 650rpx;
		height: 554rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		position: relative;
		overflow: hidden;

		&_back {
			width: 650rpx;
			height: 554rpx;
			position: absolute;
			z-index: -1;
		}

		.closeicon {
			position: absolute;
			width: 36rpx;
			height: 36rpx;
			right: 28rpx;
			top: 28rpx;
		}

		.gongxinitext {
			width: 370rpx;
			margin: auto;
			font-size: 36rpx;
			color: #FE34B9;
			font-weight: bold;
			margin-top: 88rpx;

		}

		.contentimg {
			width: 540rpx;
			height: 340rpx;
			margin: 30rpx auto;
			display: block;
		}
	}

	.zhongjiangbox {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.t1 {
			font-family: "Alimama";
			font-weight: bold;
			color: #FFCB6F;
			font-size: 48rpx;
			text-align: center;
			font-style: normal;
		}

		.t2 {
			font-family: "Alimama";
			font-weight: bold;
			font-size: 44rpx;
			color: #FE34B9;
			text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
			margin-top: 20rpx;
		}

		.fatherbox {
			width: 639.47rpx;
			height: 560rpx;
			position: relative;

			.jpimg {
				width: 639.47rpx;
				height: 560rpx;
				position: absolute;
				z-index: -1;
			}

			.lijichkan1 {
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFF4E3;
				text-align: center;
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFF4E3;
				margin-top: 485rpx;
				text-indent: 44rpx;
			}
		}

	}

	.my {
		width: 100%;
		overflow: hidden;
		position: relative;

		.myback {
			width: 100%;
			height: 808rpx;
			position: absolute;
			z-index: -1;
		}

		.centerbox {
			width: 686rpx;
			margin: auto;
			margin-top: 578rpx;
			z-index: 9999;

			.yijianitem {
				width: 686rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				position: relative;

				.readuce1 {
					width: 15rpx;
					height: 15rpx;
					background: red;
					font-size: 22rpx;
					color: #fff;
					text-align: center;
					line-height: 24rpx;
					position: absolute;
					border-radius: 50%;
					right: 72rpx;

				}

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-left: 28rpx;
				}
			}

			.jianglibox {
				width: 100%;
				height: 186rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 999;

				.linecenter {
					width: 638rpx;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					z-index: 99;

					.leftbox {
						width: 304rpx;
						height: 138rpx;
						position: relative;

						.readuce {
							padding: 0 8rpx;
							height: 24rpx;
							background: red;
							font-size: 22rpx;
							color: #fff;
							text-align: center;
							line-height: 24rpx;
							position: absolute;
							border-radius: 50%;
							left: 60rpx;
							top: 86rpx;
						}

						.leftboximg {
							width: 304rpx;
							height: 138rpx;
							position: absolute;
							z-index: -1;
						}

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 34rpx;
							color: #FF6E9C;
							margin-top: 24rpx;
							margin-left: 20rpx;
							z-index: 999;
						}

						.arrowbox {
							display: flex;
							align-items: center;
							height: 28rpx;
							font-size: 24rpx;
							color: #fff;
							margin-left: 20rpx;
							z-index: 999;
							margin-top: 28rpx;
							background: #FF6E9C;
							border-radius: 30rpx;
							padding: 0 8rpx;
							width: fit-content;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-left: 8rpx;
								z-index: 999;
								margin-top: 0 !important;
							}

						}

						.arrow {
							width: 28rpx;
							margin-left: 20rpx;
							margin-top: 28rpx;
							height: 28rpx;
							z-index: 999;
						}

					}
				}
			}

			.imagebox {
				width: 100%;
				height: 210rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				.imageboximg {
					width: 100%;
					height: 210rpx;
					position: absolute;
					z-index: -1;
				}

				.avtar {
					width: 144rpx;
					height: 144rpx;
					margin-top: -72rpx;
					border-radius: 50%;
				}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					margin-top: 32rpx;
				}

				.membernum {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #696969;
					margin-top: 16rpx;
				}
			}
		}
	}
</style>